'use strict';

import React, { Component } from 'react';
import {
  Modal,
  StyleSheet,
  Dimensions,
  View,
  Text,
  TouchableOpacity,
  Platform,
  Vibration,
  Alert,
} from 'react-native';
import PropTypes from 'prop-types';
import BaseStyle from '../constants/Style';
const sceenWidth = Dimensions.get('window').width;

export default class PasswordModalComponent extends Component {
  static defaultProps = {
    modalTitle: '请输入密码',
    animationType: 'slide',
    pwdShow: false, //是否开启密码提示
    pwdVal: '',
    isOpenVibration: false, //是否开启震动
    errorText: '请输入6位数字密码~',
    checkPwd: false, //默认关闭校验
    closePwd: () => {},
    forGetToGo: () => {
      alert('执行了忘记密码操作');
    },
  };
  static propTypes = {
    modalVisible: PropTypes.bool, //是否开启安全键盘
    modalTitle: PropTypes.string, //标题
    animationType: PropTypes.string, //弹出效果
    pwdShow: PropTypes.bool, //是否开启密码提示
    errorText: PropTypes.string, //错误提示
    isOpenVibration: PropTypes.bool, //是否开启震动
    forGetToGo: PropTypes.func, //忘记密码操作事件
    closePwd: PropTypes.func, // 关闭密码键盘
    callBackPwd: PropTypes.func, //  密码的回调
    checkPwd: PropTypes.bool, //是否开启校验
  };
  constructor(props) {
    super(props);
    this.state = {
      password: '',
      staticKeys: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
    };
  }

  _setModalVisible(visible) {
    const { closePwd, checkPwd, errorText } = this.props;
    if (visible) {
      this.setState({ password: '' });
    }
    //开启校验
    if (checkPwd && !/^[0-9]{6}$/.test(this.state.password)) {
      Alert.alert('', errorText);
      return false;
    }

    closePwd();
  }

  clearPwd() {
    this.setState({ password: '' });
  }

  keyOnPress(key) {
    const pattern = Platform.OS === 'android' ? [0, 150, 0, 0] : [0];
    const {
      isOpenVibration,
      closePwd,
      callBackPwd,
      checkPwd,
      errorText,
    } = this.props;
    if (isOpenVibration) {
      Vibration.vibrate(pattern);
    }
    let password = this.state.password;
    if (key === 'deleteBtn') {
      if (password.length > 0) {
        this.setState({ password: password.substring(0, password.length - 1) });
      }
      return;
    }
    if (key === 'reset') {
      this.clearPwd();
    }
    this.setState({ password: password + key }, () => {
      if (password.length === 5) {
        //开启校验  并且在规则成立下
        if (checkPwd && !/^[0-9]{6}$/.test(this.state.password)) {
          Alert.alert('', errorText);
          return false;
        }
        this.clearPwd();
        closePwd();
        callBackPwd(this.state.password);
        return;
      }
    });
  }
  render() {
    const {
      animationType,
      modalVisible,
      modalTitle,
      forGetToGo,
      closePwd,
    } = this.props;
    const modalBackgroundStyle = {
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
    };

    let length = this.state.password.length;

    return (
      <Modal
        animationType={animationType}
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          this._setModalVisible(false);
        }}>
        <TouchableOpacity
          activeOpacity={0.9}
          onPress={() => {
            this._setModalVisible(false);
          }}
          style={[styles.container, modalBackgroundStyle]}
        />
        <View style={styles.keyContainer}>
          <View style={[styles.innerContainer]}>
            <View style={[styles.modalTitle]}>
              <View style={styles.modalTitleView}>
                <View
                  style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text style={[styles.modalTitleText]}>{modalTitle}</Text>
                </View>
                <TouchableOpacity
                  onPress={() => {
                    this._setModalVisible(false);
                  }}>
                  <Text style={[styles.modalTitleTextIcon]}>&#xe68c;</Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.pwdContainerView}>
              <View style={styles.pwdContainer}>
                <View style={[styles.borderRightStyle, styles.pwdItems]}>
                  {length > 0 ? <View style={styles.pwdItem} /> : null}
                </View>
                <View style={[styles.borderRightStyle, styles.pwdItems]}>
                  {length > 1 ? <View style={styles.pwdItem} /> : null}
                </View>
                <View style={[styles.borderRightStyle, styles.pwdItems]}>
                  {length > 2 ? <View style={styles.pwdItem} /> : null}
                </View>
                <View style={[styles.borderRightStyle, styles.pwdItems]}>
                  {length > 3 ? <View style={styles.pwdItem} /> : null}
                </View>
                <View style={[styles.borderRightStyle, styles.pwdItems]}>
                  {length > 4 ? <View style={styles.pwdItem} /> : null}
                </View>
                <View style={[styles.pwdItems]}>
                  {length > 5 ? <View style={styles.pwdItem} /> : null}
                </View>
              </View>
              {
                <TouchableOpacity
                  onPress={() => {
                    closePwd();
                    this.clearPwd();
                    setTimeout(() => {
                      //这里加个延时跳转不然 会出现意外的错误 原生线程问题
                      forGetToGo();
                    }, 200);
                  }}
                  style={styles.pwdForgetContainer}>
                  <Text style={styles.pwdForgetText}>忘记密码</Text>
                </TouchableOpacity>
              }
            </View>
          </View>
          {this.state.staticKeys.map(i => {
            return (
              <View style={styles.keyItems} key={i + '_'}>
                {i.map(j => {
                  return (
                    <TouchableOpacity
                      key={'_' + j}
                      onPress={this.keyOnPress.bind(this, j)}
                      style={[
                        styles.keyItem,
                        styles.keyBorderRight,
                        styles.keyBorderBottom,
                      ]}>
                      <Text style={styles.keyText}>{j}</Text>
                    </TouchableOpacity>
                  );
                })}
              </View>
            );
          })}

          <View style={styles.keyItems}>
            <TouchableOpacity
              style={[
                styles.keyItem,
                styles.keyBorderRight,
                { backgroundColor: '#d7d8dc' },
              ]}
              onPress={this.keyOnPress.bind(this, 'reset')}>
              <Text style={[styles.keyText, { fontSize: 16, color: '#000' }]}>
                重置
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={this.keyOnPress.bind(this, '0')}
              style={[
                styles.keyItem,
                styles.keyBorderRight,
                styles.keyBorderBottom,
              ]}>
              <Text style={styles.keyText}>0</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={this.keyOnPress.bind(this, 'deleteBtn')}
              style={[
                styles.keyItem,
                styles.keyBorderRight,
                { backgroundColor: '#d7d8dc' },
              ]}>
              <Text
                style={[
                  styles.keyText,
                  { fontFamily: 'iconfont', fontSize: 37 / 2 },
                ]}>
                &#xe68c;
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }
}

let styles = StyleSheet.create({
  modelView: {
    flex: 1,
    backgroundColor: 'rgba(40,40,40,0.6)',
  },
  pwdContainerView: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    paddingTop: 35,
    paddingBottom: 80 / 2,
    backgroundColor: '#f7f7f7',
    width: sceenWidth,
  },
  modalTitleView: {
    ...BaseStyle.row,
  },
  keyBorderRight: {
    borderRightColor: '#d1d1d1',
    borderRightWidth: 1,
  },
  keyBorderBottom: {
    borderBottomColor: '#d1d1d1',
    borderBottomWidth: 1,
  },
  keyTextEN: {
    color: '#000',
    fontSize: 20 / 2,
  },
  keyText: {
    color: '#000',
    fontSize: 50 / 2,
  },
  keyItem: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    flex: 1,
    height: 118 / 2,
  },
  keyItems: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    flex: 1,
  },
  keyContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    backgroundColor: '#fff',
    height: 860 / 2,
    width: sceenWidth,
  },
  borderRightStyle: {
    borderRightColor: '#e5e5e5',
    borderRightWidth: 1,
  },
  pwdItems: {
    flex: 1,
    height: 112 / 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  pwdItem: {
    height: 30 / 2,
    width: 30 / 2,
    backgroundColor: '#333',
    borderRadius: 15 / 2,
  },
  pwdContainer: {
    ...BaseStyle.row,
    height: 112 / 2,
    width: sceenWidth - 30 / 2 - 32 / 2,
    borderRadius: 2,
    borderWidth: 1,
    borderColor: '#e5e5e5',
    backgroundColor: '#fff',
  },
  pwdForgetContainer: {
    width: sceenWidth - 30 / 2 - 32 / 2,
    alignItems: 'flex-end',
    paddingTop: 20 / 2,
  },
  pwdForgetText: {
    fontFamily: 'iconfont',
    fontSize: 26 / 2,
    color: '#1891e3',
  },
  modalFooterText: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    fontSize: 16,
    color: '#fff',
  },
  modalButton: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    height: 70 / 2,
    width: 280 / 2,
    backgroundColor: '#ff5039',
    borderRadius: 4,
  },
  modalFooter: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    marginTop: 45 / 2,
    marginBottom: 45 / 2,
    width: sceenWidth - 30 / 2 - 32 / 2,
  },
  modalTitle: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    paddingLeft: 30 / 2,
    paddingRight: 30 / 2,
    paddingTop: 25 / 2,
    paddingBottom: 25 / 2,
    width: sceenWidth,
    overflow: 'hidden',
  },
  modalTitleTextIcon: {
    fontSize: 32 / 2,
    color: '#666',
    fontFamily: 'iconfont',
  },
  modalTitleText: {
    flex: 1,
    fontSize: 30 / 2,
    color: '#333',
    fontFamily: 'iconfont',
  },
  container: {
    ...BaseStyle.justifyContentCenter,
    flex: 1,
  },
  innerContainer: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    backgroundColor: '#fff',
  },
  row: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    flex: 1,
    marginBottom: 20 / 2,
  },
  rowTitle: {
    flex: 1,
    fontWeight: 'bold',
  },
  button: {
    borderRadius: 5,
    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  buttonText: {
    fontSize: 18,
    margin: 5,
    textAlign: 'center',
  },
});
